<!-- @module input-form -->
<!-- @author: YunTao.Li -->
<!-- @description:  请假单的弹出form-->
<!-- @since: 2019-11-14 12:47:36 -->
<template>
  <el-dialog class="dialogStyle" title="请假单" :visible.sync="dialogFormVisible" width="90%" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @close="closeDialog">
    <el-form ref="leaveInputForm" :model="leaveInputForm" :rules="formFormatRules" :label-position="labelPosition" label-width="120px" size="mini">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="组织机构" prop="ouId">
            <OrgSelectTree ref="orgSelectRef" v-model="leaveInputForm.orgCode" placeholder="组织机构" :disabled="true" @bindLabel="bindLabel" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="leaveInputForm.deptName" name="deptName" placeholder="部门名称" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="假期类型" prop="holidayType">
            <dictCombo v-model="leaveInputForm.holidayType" dicttypeid="holidayType" name="holidayType" placeholder="假期类型" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="申请单编码" prop="leaveCode">
            <el-input v-model="leaveInputForm.leaveCode" name="leaveCode" placeholder="自动生成" :disabled="true" />
          </el-form-item>
        </el-col>
        <!-- <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="创建日期" prop="creationDate">
            <el-date-picker v-model="leaveInputForm.creationDate" type="date" name="creationDate" placeholder="创建日期" />
          </el-form-item>
        </el-col> -->
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="开始日期" prop="startDate">
            <el-date-picker v-model="leaveInputForm.startDate" :picker-options="pickerOptionsStart" style="width:100%;" type="date" name="startDate" placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="开始时段" prop="startTimeType">
            <dictCombo v-model="leaveInputForm.startTimeType" dicttypeid="timeTypeChose" name="startTimeType" placeholder="开始时段" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker v-model="leaveInputForm.endDate" :picker-options="pickerOptionsEnd" style="width:100%;" type="date" name="endDate" placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="结束时段" prop="endTimeType">
            <!-- <el-input v-model="leaveInputForm.endTimeType" name="endTimeType" placeholder="结束时段" /> -->
            <dictCombo v-model="leaveInputForm.endTimeType" dicttypeid="timeTypeChose" name="endTimeType" placeholder="结束时段" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="请假天数" prop="days">
            <el-input v-model="leaveInputForm.days" name="days" placeholder="请假天数" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="leaveInputForm.telephone" name="telephone" placeholder="联系电话" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="紧急联系人" prop="contact">
            <el-input v-model="leaveInputForm.contact" name="contact" placeholder="紧急联系人" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="紧急联系人电话" prop="contactPhone">
            <el-input v-model="leaveInputForm.contactPhone" name="contactPhone" placeholder="联系电话" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="是否离京" prop="isLeaveBj">
            <!-- <el-input v-model="leaveInputForm.isLeaveBj" name="isLeaveBj" placeholder="联系电话" /> -->
            <dictCombo v-model="leaveInputForm.isLeaveBj" dicttypeid="yesOrNot" name="isLeaveBj" placeholder="是否离京" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="离京时间" prop="leaveTime">
            <el-input v-model="leaveInputForm.leaveTime" name="leaveTime" placeholder="离京时间" :disabled="leaveBJDisable" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <el-form-item label="回京时间" prop="backTime">
            <el-input v-model="leaveInputForm.backTime" name="backTime" placeholder="回京时间" :disabled="leaveBJDisable" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="去向" prop="position">
            <el-input v-model="leaveInputForm.position" name="position" placeholder="去向" type="textarea" rows="2" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="请假事由" prop="leaveDesc">
            <el-input v-model="leaveInputForm.leaveDesc" name="leaveDesc" placeholder="请假事由" type="textarea" rows="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <fileUpload :param-pa-doc-id="leaveInputForm.fileParamPaDocId" />

    <div slot="footer" class="dialog-footer" style="margin:10px;text-align: center">
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import fileUpload from './../fileupload'
import { createUniqueString } from '@/utils'
import OrgSelectTree from './../combo/org-tree-select.vue'
import dictCombo from '@/views/attendance/components/combo/dict-comb'
import { dateCalc } from '@/api/attendance/holidaylaws-service'

export default {
  components: { fileUpload, OrgSelectTree, dictCombo },
  data() {
    return {
      dialogFormVisible: false,
      leaveBJDisable: true,
      labelPosition: 'right',
      leaveInputForm: {
        fileParamPaDocId: '',
        leaveId: '',
        ouId: '',
        orgCode: '',
        orgName: '',
        deptName: '',
        deptCode: '',
        empName: '',
        empCode: '',
        workYear: '',
        leaveCode: '',
        creationDate: new Date(),
        holidayType: '',
        startDate: null,
        startTimeType: '',
        days: '',
        endDate: null,
        endTimeType: '',
        telephone: '',
        contact: '',
        contactPhone: '',
        isLeaveBj: '',
        leaveTime: '',
        backTime: '',
        position: '',
        leaveDesc: ''
      },
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.leaveInputForm.endDate) {
            return time.getTime() > new Date(this.leaveInputForm.endDate).getTime() - 1 * 24 * 60 * 60 * 1000
          }
          return false
        }
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.leaveInputForm.startDate).getTime() + 1 * 24 * 60 * 60 * 1000
        }
      },
      dateCalcQuery: {
        startDate: null,
        startTimeType: '',
        endDate: null,
        endTimeType: ''
      },
      formFormatRules: {
        orgCode: [{
          required: true,
          message: '组织机构不能为空',
          trigger: 'blur'
        }],
        holidayType: [{
          required: true,
          message: '假期类型不能为空',
          trigger: 'blur'
        }],
        startDate: [{
          required: true,
          message: '开始日期不能为空',
          trigger: 'blur'
        }],
        startTimeType: [{
          required: true,
          message: '开始时段不能为空',
          trigger: 'blur'
        }],
        endDate: [{
          required: true,
          message: '结束日期不能为空',
          trigger: 'blur'
        }],
        endTimeType: [{
          required: true,
          message: '结束时段不能为空',
          trigger: 'blur'
        }],
        请假事由: [{
          required: true,
          message: '请假事由不能为空',
          trigger: 'blur'
        }]
      },
      formLabelWidth: '120px'
    }
  },
  computed: {
    cmp_startDate() {
      return this.leaveInputForm.startDate
    },
    cmp_startTimeType() {
      return this.leaveInputForm.startTimeType
    },
    cmp_endDate() {
      return this.leaveInputForm.endDate
    },
    cmp_endTimeType() {
      return this.leaveInputForm.endTimeType
    },
    cmp_isLeaveBj() {
      return this.leaveInputForm.isLeaveBj
    }
  },
  watch: {
    cmp_startDate(newValue, oldValue) {
      this.daysCalc()
    },
    cmp_startTimeType(newValue, oldValue) {
      this.daysCalc()
    },
    cmp_endDate(newValue, oldValue) {
      this.daysCalc()
    },
    cmp_endTimeType(newValue, oldValue) {
      this.daysCalc()
    },
    cmp_isLeaveBj(newValue, oldValue) {
      if (newValue === '1') {
        this.leaveBJDisable = false
      } else {
        this.leaveBJDisable = true
      }
    }
  },
  created() {
  },
  mounted() {
    try {
      this.leaveInputForm.empCode = localStorage.getItem('empCode')
      this.leaveInputForm.empName = localStorage.getItem('empName')
      this.leaveInputForm.deptName = localStorage.getItem('deptName')
      this.leaveInputForm.deptCode = localStorage.getItem('deptCode')
      this.leaveInputForm.orgCode = localStorage.getItem('orgCode')
      this.leaveInputForm.orgName = localStorage.getItem('orgName')
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    bindLabel(orgId, label) {
      if (orgId && orgId !== '') {
        this.leaveInputForm.ouId = orgId
      }

      if (label && label !== '') {
        this.leaveInputForm.orgName = label
      }
    },
    daysCalc() {
      this.dateCalcQuery.startDate = this.leaveInputForm.startDate
      this.dateCalcQuery.startTimeType = this.leaveInputForm.startTimeType
      this.dateCalcQuery.endDate = this.leaveInputForm.endDate
      this.dateCalcQuery.endTimeType = this.leaveInputForm.endTimeType

      if (this.dateCalcQuery.startDate && this.dateCalcQuery.startTimeType && this.dateCalcQuery.endDate && this.dateCalcQuery.endTimeType) {
        dateCalc(this.dateCalcQuery).then(response => {
          const data = response.data
          this.leaveInputForm.days = data.workDay
        })
      } else {
        console.log('value null')
      }
    },
    toggele(data) { // 显示此窗口或隐藏
      if (this.dialogFormVisible) {
        this.dialogFormVisible = false
      } else {
        this.dialogFormVisible = true
      }

      if (data && data != null) {
        this.$nextTick(function() {
          this.leaveInputForm = data

          //* ***file begin */
          this.leaveInputForm.fileParamPaDocId = this.leaveInputForm.leaveId
          /** **file end */
        })
      } else {
        //* ***file begin */
        if (this.dialogFormVisible === true) {
          const uuid = createUniqueString()
          this.leaveInputForm.fileParamPaDocId = uuid
        }
        /** **file end */
      }
    },
    onCancel() { // 取消
      this.toggele()
      this.resetFormData()
    },
    onSubmit() { // 保存
      var _this = _this || this
      this.$refs.leaveInputForm.validate((valid) => {
        if (valid) {
          _this.dialogFormVisible = false
          _this.$emit('submitFunc', _this.leaveInputForm)
        } else {
          return false
        }
      })
    },
    closeDialog() {
    },
    resetFormData() {
      this.$refs.leaveInputForm.resetFields()
      this.leaveInputForm = {
        fileParamPaDocId: '',
        leaveId: '',
        ouId: '',
        orgCode: '',
        orgName: '',
        deptId: '',
        workYear: '',
        leaveCode: '',
        creationDate: new Date(),
        holidayType: '',
        startDate: null,
        startTimeType: '',
        days: '',
        endDate: null,
        endTimeType: '',
        telephone: '',
        contact: '',
        contactPhone: '',
        isLeaveBj: '',
        leaveTime: '',
        backTime: '',
        position: '',
        leaveDesc: ''
      }

      try {
        this.leaveInputForm.empCode = localStorage.getItem('empCode')
        this.leaveInputForm.empName = localStorage.getItem('empName')
        this.leaveInputForm.deptName = localStorage.getItem('deptName')
        this.leaveInputForm.deptCode = localStorage.getItem('deptCode')
        this.leaveInputForm.orgCode = localStorage.getItem('orgCode')
        this.leaveInputForm.orgName = localStorage.getItem('orgName')
      } catch (e) {
        console.log(e)
      }

      this.dateCalcQuery = {
        startDate: null,
        startTimeType: '',
        endDate: null,
        endTimeType: ''
      }
      // this.$refs.orgSelectRef.clearHandle()
    }
  }
}
</script>

